<template>
  <div class="code">
    <button @click="getData">获取数据并打印</button>
    <button v-print="'#print_area'" ref="printBtn" style="display: none">打印2</button>
    <!--<svg ref="code"></svg>-->
    <div class="hidden_area">
      <!--<div class="hidden_area" style="visibility: hidden;">-->
      <div id="print_area">
        <div v-for="(item, index) in area" :key="index">
          <div style="border: 1px solid #c9cacb;padding: 5mm;display: inline-block;vertical-align: middle;">
            <div :id="`qrcode${index + 1}`" :ref="`qrcode${index + 1}`"></div>
          </div>
          <div style="display: inline-block; font-size: 16mm;vertical-align: middle;margin-left: 5mm">
            <p>{{area[index].batchName}}</p>
            <p>生产指令卡</p>
          </div>
          <info-grid
            :rowSize="3"
            labelWidth="120px"
            customClass="print_grid"
            :infoData="area[index].detail"
            :items="gridItems">
          </info-grid>
          <div style="margin-bottom: 2mm">工序上料表</div>
          <el-table
            :data="area[index].list"
            border
            style="width: 290mm; border: 2px solid #333;"
            tooltip-effect="dark">
            <el-table-column
              prop="prop2"
              label="二维码"
              align="center"
              width="80"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <div :id="`codeStage${index + 1}/${scope.row.index}`" :ref="`codeStage${index + 1}/${scope.row.index}`"></div>
              </template>
            </el-table-column>
            <mes-column
              :key="index"
              v-for="(column, index) in columns"
              :column="column"></mes-column>
          </el-table>
          <div style="page-break-after: always;"></div>
        </div>
      </div>
    </div>
    <!--<button @click="print">打印</button>-->
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import cols from './cols'
import items from './items'

export default {
  name: 'Code',
  mounted() {
    // this.barcode()
  },
  data() {
    return {
      columns: cols,
      gridItems: items,
      area: [
        {
          batchName: 'GD-001-001',
          detail: {
            prop1: 'GD0021-001',
            prop2: 'GD0021-001',
            prop3: '2018-08-09 23:23:23',
            prop4: 'GD0021-001',
            prop5: 'GD0021-001',
            prop6: '100',
            prop7: '2018-08-09',
            prop8: '2018-08-09',
            prop9: '2',
          },
          list: [{
            index: 0,
            prop1: '01',
            prop2: 'PRC001',
            prop3: '工序名称',
            prop4: '12345678',
            prop5: '物料名称',
            prop6: '图号图号',
            prop7: '批次追溯',
          }, {
            index: 1,
            prop1: '01',
            prop2: 'PRC002',
            prop3: '工序名称工序名称工序名称',
            prop4: '12345678',
            prop5: '物料名称物料名称物料名称',
            prop6: '图号图号',
            prop7: '批次追溯',
          }, {
            index: 2,
            prop1: '01',
            prop2: 'PRC003',
            prop3: '工序名称工序名称工序名称',
            prop4: '12345678',
            prop5: '物料名称物料名称物料名称',
            prop6: '图号图号',
            prop7: '批次追溯',
          }, {
            index: 3,
            prop1: '01',
            prop2: 'PRC004',
            prop3: '工序名称工序名称工序名称',
            prop4: '12345678',
            prop5: '物料名称物料名称物料名称',
            prop6: '图号图号',
            prop7: '批次追溯',
          }]
        }
      ],
    }
  },
  methods: {
    getData() {
      for (let i = 1; i <= this.area.length; i++) {
        this.qrcode(this.area[i - 1].batchName, i)
        this.area[i - 1].list.map((item, j) => {
          this.stageCode(`/${item.prop2}`, i, j)
        })
      }
      setTimeout(() => {
        this.$refs.printBtn.click()
      }, 50)
    },
    stageCode(val, i, j) {
      // 生成二维码前清空之前的二维码
      this.$refs[`codeStage${i}/${j}`][0].innerHTML = ''
      let qrcode = new QRCode(`codeStage${i}/${j}`, {
        width: 30,
        height: 30, // 高度
        // render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        colorDark: '#000', // 生成的二维码的深色部分
        colorLight: '#fff' // 生成二维码的浅色部分
      })
      qrcode.makeCode(val)
    },
    // 生成条形码
    barcode() {
      let JsBarcode = require('jsbarcode')
      // 条形码不支持汉字，所有格式均不支持
      JsBarcode(this.$refs.code, 'ABCD-11', {
        width: 1, // 较细处条形码的宽度
        height: 30, // 条形码的宽度，无高度直接设置项，由位数决定，可以通过CSS去调整，见下
        quite: 0,
        format: 'CODE128', // code 格式二维码js 生成
        font: 'monospace', // 条形码数据字体
        textAlign: 'center', // 条形码数据对其方式
        fontSize: 22, // 条形码数据字体大小
        background: '#fff', // 条形码背景颜色
        lineColor: '#00f', // 条形码颜色
        displayValue: true, // 是否默认显示条形码数据
        textPosition: 'top', // 条形码数据显示的位置，top or bottom
        valid: (valid) => {
        } // 条形码是否转换成功
      })
    },
    qrcode(val, i) {
      // 生成二维码前清空之前的二维码
      this.$refs[`qrcode${i}`][0].innerHTML = ''
      let qrcode = new QRCode('qrcode' + i, {
        width: 150,
        height: 150, // 高度
        // render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        colorDark: '#000', // 生成的二维码的深色部分
        colorLight: '#fff' // 生成二维码的浅色部分
      })
      qrcode.makeCode(val)
    },
    print() {
      let newWindow = window.open('_blank') // 打开新窗口
      let codestr = document.getElementById('qrcode').innerHTML // 获取需要打印的div代码
      newWindow.document.write(codestr) // 向文档写入HTML表达式或者JavaScript代码
      newWindow.document.close() // 关闭document的输出流, 显示选定的数据
      newWindow.print() // 打印当前窗口
      return true
    }
  }
}
</script>

<style lang="less">
  .code_container {
    border: 1px solid #c9cacb;
    padding: 5mm;
    display: inline-block;
  }

  /* 去掉打印时的页眉页脚 */
  @page {
    size: auto;   /* auto is the initial value */
    margin: 0;  /* this affects the margin in the printer settings */
  }

  @media print {
    /* 打印时隐藏 */
    .not-print {
      opacity: 0
    }

    #print_area {
      width: 310mm;
      box-sizing: border-box;
      padding-left: 10mm;
      padding-top: 10mm;
    }

    .print_grid {
      width: 290mm;
      margin-bottom: 10mm;
      margin-top: 10mm;
      border-top: 1px solid #333 !important;
      border-left: 1px solid #333 !important;
      .info_grid_item {
        border-bottom: 1px solid #333 !important;
        border-right: 1px solid #333 !important;
      }

      .info_grid_label {
        border-right: 1px solid #333 !important;
      }
    }

    .el-table--border th, .el-table--border td {
      border-right: 1px solid #333 !important;
    }

    .el-table td, .el-table th.is-leaf {
      border-bottom: 1px solid #333 !important;
    }
  }
</style>
